<template>
  <div>
    <Breadcrumb :items="['menu.system', '菜单配置']" />
    <div>
      <a-spin :loading="pageLoading?.loading" style="width: 100%">
        <CardConponents>
          <a-button type="primary" @click="handleClick">新增</a-button>
        </CardConponents>
        <CardConponents>
          <a-table :data="dataList?.list" :pagination="pagination" @page-change="pageChange">
            <template #columns>
              <a-table-column title="id" data-index="id"></a-table-column>
              <a-table-column title="名称" data-index="name"></a-table-column>
              <a-table-column title="状态" data-index="status">
                <template #cell="{ record }">
                  {{ showStatus(record) }}
                </template>
              </a-table-column>
              <a-table-column title="url" data-index="url"></a-table-column>
              <a-table-column title="前端跳转链接" data-index="wrb_url"></a-table-column>
              <a-table-column title="排序" data-index="sort"></a-table-column>
              <a-table-column title="创建时间" data-index="create_time">
                <template #cell="{ record }">
                  {{ record.create_time ? getTime(Number(record?.create_time)) : '' }}
                </template>
              </a-table-column>
              <a-table-column title="操作">
                <template #cell="{ record }">
                  <a-button type="primary" size="small" @click="handleEdidClick(record)">编辑</a-button>
                  <a-popconfirm content="确定要删除吗?" type="error" @ok=handleDelClick(record)>
                    <a-button type="primary" status="danger" size="small">删除</a-button>
                  </a-popconfirm>
                </template>
              </a-table-column>
            </template>
          </a-table>

        </CardConponents>
        <a-modal :maskClosable=false v-model:visible="visible" :title="form.Id > 0 ? '编辑' : '新增'" :footer="false">
          <a-form :model="form" @submit="handleSubmit">
            <a-form-item field="Name" label="名称" :rules="[{ required: true, message: '不能为空' }]">
              <a-input v-model="form.Name" />
            </a-form-item>

            <a-form-item field="StatusEd" label="状态">
              <a-switch :default-checked="form.StatusEd" v-model="form.StatusEd" />
            </a-form-item>

            <a-form-item field="Sort" label="排序">
              <a-input v-model="form.Sort" />
            </a-form-item>

            <a-form-item field="web_url" label="前端url">
              <a-input v-model="form.WebUrl" />
            </a-form-item>
            <a-form-item field="Url" label="url">
              <a-input v-model="form.Url" />
            </a-form-item>
            <a-form-item field="Icon" label="icon">
              <a-input v-model="form.Icon" />
            </a-form-item>
            <a-form-item field="IsMenu" label="类型选择">
              <a-select :style="{ width: '320px' }" v-model="form.IsMenu" placeholder="请选择 ...">
                <a-option :value="1">菜单链接</a-option>
                <a-option :value="2">操作</a-option>
                <a-option :value="0">菜单</a-option>
              </a-select>
            </a-form-item>
            <a-form-item field="ParentId" label="父级">
              <a-tree-select :data="treeData" v-model="form.ParentId" placeholder="请选择 ..."
                style="width: 300px"></a-tree-select>
            </a-form-item>
            <div class="btn">
              <a-button style="width: 100px;margin-right: 10px;" @click="cancelClick">
                取消
              </a-button>
              <a-button style="width: 100px;" type="primary" html-type="submit" long :loading="loading">
                提交
              </a-button>
            </div>
          </a-form>
        </a-modal>
      </a-spin>
    </div>
  </div>
</template>


<script lang="ts" setup>
import CardConponents from '@/components/card/index.vue';
// import { reactive, ref } from 'vue';
import useLoading from '@/hooks/loading';
import { onMounted, reactive, ref } from 'vue';
import { Message } from '@arco-design/web-vue';

import { menuListTest, add, edit, del, menuListTreeTest } from '@/api/menu';//获取列表
import { getTime } from '@/utils/auth'



const pageLoading: any = reactive({ loading: false });
const treeData:any = ref([])




const pageChange = (current: any) => {
  getList()
}

const pagination = reactive({
  pageSize: 10,
  total: 0,
  current: 1,
})

const form: any = reactive({
  Name: '',
  Url: '',
  WebUrl: '',
  StatusEd: '',
  Icon: '',
  Sort: '',
  IsMenu: '',
  Id: '',
  ParentId: '',
});

const visible = ref(false);
const clearForm = () => {
  form.Name = ''
  form.Url = ''
  form.WebUrl = ''
  form.StatusEd = ''
  form.Sort = ''
  form.Icon = ''
  form.IsMenu = ''
  form.ParentId = ''
  form.Id = ''

}
const cancelClick = () => {
  visible.value = false;
  clearForm()
}

//新增弹框
const handleClick = () => {
  visible.value = true;
  clearForm()
};

const showStatus = (value: any) => {
  return value.status === 1 ? '正常' : '禁止'
}




const { loading, setLoading } = useLoading();

onMounted(() => {
  getList()
  getListTree()
});

//数据
const dataList: any = reactive({
  list: [],
  total: 0
});



//请求
const getList = async () => {
  pageLoading.loading = true
  const res = await menuListTest({ data: { Offset: 0, Limit: 10 } })
  pageLoading.loading = false
  dataList.list = res?.data

}


//请求父级
const getListTree = async () => {

  const res = await menuListTreeTest({ data: { Offset: 0, Limit: 10 } })

  // treeData = res1?.data
  var data = res?.data
  const treeList: any = []
  data.forEach((item: any) => {
    var content: any = []
    content["key"] = item.id
    content["title"] = item.name
    content["children"] = []
    if (item.children) {
      item.children.forEach((items: any) => {
        var content1: any = []
        content1["key"] = items.id
        content1["title"] = items.name
        content["children"].push(content1)
      })
    }
    treeList.push(content)
  });

  treeData.value = treeList

}


//新增、编辑
const handleSubmit = async ({ errors, values }: any) => {
  if (loading.value) return;
  if (!errors) {

    if (values.StatusEd == "true" || values.StatusEd == true) {
      values.Status = 1
    } else {
      values.Status = 0
    }

    try {
      setLoading(true);
      if (form.Id > 0) {
        const res: any = await edit(values);
        Message.success(res?.msg);
        setLoading(false);
        if (res?.code == 1) {
          visible.value = false;
          clearForm()
          getList()
        }
      } else {
        const res: any = await add(values);
        Message.success(res?.msg);
        setLoading(false);
        if (res?.code == 1) {
          visible.value = false;
          clearForm()
          getList()
        }
      }
      getListTree();
    } catch (error) {
      setLoading(false);
    }
  }
};


const handleEdidClick = (value: any) => {
  // clearForm()
  visible.value = true;
  // clearForm()
  form.StatusEd = value.status == 1 ? true : false
  form.Name = value.name
  form.Url = value.url
  form.WebUrl = value.web_url
  form.StatusEd = value.status == 1 ? true : false
  form.Sort = value.sort
  form.Icon = value.icon
  form.IsMenu = value.is_menu
  form.Id = value.id
  form.ParentId = value.parent_id

}

// 删除
const handleDelClick = async (value: any) => {
  const res: any = await del({ Id: value?.id });
  Message.success(res?.msg)
  if (res?.code === 1) {

    getList()
  }
}
</script>

<script lang="ts">
export default {
  name: 'MenuManagement',
};
</script>

<style lang="less" scoped>
.btn {
  display: flex;
  justify-content: flex-end;
}
</style>